<template>
	<view class="viewbg">
		<view class="header">
			<view style="display: flex;">
				<image :src="listData.cover" style="width: 200rpx;height: 200rpx;margin: 40rpx 20rpx 20rpx 20rpx;">
				</image>
				<view style="margin: 0rpx 0 0 0rpx;">
					<view style="font-size: 32rpx;font-weight: 600;margin-top: 50rpx;">
						{{listData.title}}
					</view>
					<view style="color: #6D6D6D;font-size: 24rpx;margin-top: 10rpx;white-space: pre-line;"
						v-html="listData.message">

					</view>
				</view>
			</view>
		</view>
		<a href="mayimae.com://open?param1=value1&param2=value2">跳转APP</a>
		<view class="content"
			style="background-color: white;height: calc(100vh - 180rpx);border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
			<!-- 			<view style="margin: 0 20rpx;width: calc(100% - 40rpx);">
				<v-tabs style="padding-top: 20rpx;" v-model="current" :tabs="tabs" :pills="true" line-height="0"
					pillsColor="#FFEACD" color="#CD665E" activeColor="#CD665E" :scroll="false"
					@change="changeTab"></v-tabs>
			</view> -->
			<view style="background-color: white;">
				<view v-for="(list,i) in listData.data" :key="list.id">
					<view style="display: flex;">
						<image :src="list.cover" style="width: 150rpx;margin: 20rpx;" mode="widthFix"></image>
						<view style="display: grid;">
							<view style="margin-top: 40rpx;">
								{{list.title}}
							</view>
							<view style="display: flex;line-height: 30rpx;height: 30rpx;">
								<view style="font-size: 30rpx;">
									{{list.message}}
								</view>
								<view style="color: #6D6D6D;font-size: 24rpx;margin-left: 100rpx;display: flex;">
									<image :src="xinUrl" style="width: 30rpx;height: 30rpx;"></image>
									{{list.like_num}}
								</view>
							</view>
						</view>

					</view>

				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	import {
		getDailyDataByType
	} from '@/api/home.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'

	export default {
		components: {

		},
		data() {
			return {
				isFreeUp: false,
				isFreeSuccessUp: false,
				current: 0,
				tabs: [
					'1-50',
					'51-100',
					'101-150',
				],
				courses: [
					'http://pic.mae.vip/11750564226527.jpg', 'http://pic.mae.vip/11750564226527.jpg',
					'http://pic.mae.vip/11750564226527.jpg', 'http://pic.mae.vip/11750564226527.jpg',
					'http://pic.mae.vip/11750564226527.jpg', 'http://pic.mae.vip/11750564226527.jpg',
				],
				introUrl: '../../static/images/bargain_post1.png',
				xinUrl: '../../static/images/appH5/xin-n.png',
				phoneNumber: '-1',
				userId: '-1',
				token: '-1',
				scrollDistance: 0,
				platform: uni.getSystemInfoSync().platform, //手机类型
				listData: {},
				isIos: false,
				isAndroid: false,
				schemeUrl: '',
				downloadUrl: '',
			}
		},
		created() {
			let that = this;
			if (that.platform == 'ios') {
				console.log('isIOS')
				this.isIos = true;
				this.schemeUrl = 'mayimae.com://';
				this.downloadUrl = 'http://itunes.apple.com/lookup?id=1412586191';
			} else {
				console.log('isAndroid')
				this.isAndroid = true;
				this.schemeUrl = 'mayimae.com://open/path?param1=value1&param2=value2&param3=value3';
				this.downloadUrl = '你的安卓app下载地址';
			}
		},
		mounted: function() {
			let that = this;
			that.getList();
			console.log('isBlackApp === ' + that.isBlackApp())
			if (!that.isBlackApp()) {
				if (that.platform == 'ios') {
					that.openTuer();
				}
			} else {
				alert('请在其它浏览器中打开')
			}
		},
		methods: {
			isBlackApp() {
				var u = navigator.userAgent.toLowerCase();
				return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf(
					'mqqbrowser') > -1;
			},
			// 点击打开app
			openTuer() {
				if (JSON.parse(sessionStorage.getItem("vuex"))) {
					console.log('vuex')
					//this.$options.methods.jumpApp(this.SchemeUrl + '拼接参数');
					//this.$options.methods.noApp();
				} else {
					console.log('vue')
					window.location.href = this.schemeUrl; // 跳转打开app
					this.noApp();
				}
			},
			// 无响应或者没安装跳转下载
			noApp() {
				var t = Date.now(),
					r = this.downloadUrl;
				this.timer = setTimeout(function() {
					return Date.now() - t > 2200 ?
						(clearTimeout(this.timer), !1) :
						!document.webkitHidden &&
						!document.hidden &&
						void(location.href = r);
				}, 2000);
			},
			getList() {
				let that = this;
				let p = {};
				p.userId = '-1';
				p.token = '-1';
				p.type = '相机摄影教程';
				p.page = '1';
				getDailyDataByType(p).then(res => {
					if (res.code == 0) {
						that.listData = res.data;
					}
				})
			},
			goFree() {
				let that = this;
				that.isFreeUp = true;
			},
			toCloseFree(e) {
				let that = this;
				that.isFreeUp = false;
			},
			freeWithData(e) {
				let that = this;
				//console.log('123123')
				that.isFreeUp = false;
				that.isFreeSuccessUp = true;
			},
			toCloseSuccessFree(e) {
				let that = this;
				that.isFreeSuccessUp = false;
			},
			successWithData(e) {
				let that = this;
				that.isFreeSuccessUp = false;
			},
			changeTab(index) {
				console.log('当前选中索引：' + index)
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background-color: white;
	}

	.header {
		width: 100%;
		height: 280rpx;
	}

	.viewbg {
		// width: 100%;
		// height: 100%;
		// background-image: url('~@/static/images/appH5/freetop.png');
		// background-repeat: no-repeat;
		// background-size: 100% 100%;
		// display: table;
	}
</style>